<template>
  <div>
    <el-radio-group class="tabs" size="mini" v-model="tabPosition" style="margin-bottom: 30px;">
      <el-radio-button @click.native="typeIndex=1" label="top">进行时</el-radio-button>
      <el-radio-button @click.native="typeIndex=2" label="right">已封盘</el-radio-button>
    </el-radio-group>

    <!-- 进行时列表 -->
    <div v-if="typeIndex == 1 ? true : false">
      <el-row class="home-line" :gutter="20">
        <el-col :span="12">
          <div class="border-size home-type">
            <el-tag>河内五</el-tag>
            <div>期数：{{msg1.issue}}</div>
            <div>据封盘还有{{msg1.time}}</div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="border-size home-type">
            <el-tag>澳洲五</el-tag>
            <div>期数：{{msg2.issue}}</div>
            <div>据封盘还有{{msg2.time2}}</div>
          </div>
        </el-col>
      </el-row>

      <div class="tabs">
        <el-input
          class="edge"
          style="width:180px"
          size="mini"
          placeholder="注单编号,账号"
          prefix-icon="el-icon-search"
          v-model="keyword"
        ></el-input>

        <!-- 彩种 -->
        <el-select
          class="edge"
          style="width:180px"
          clearable
          size="mini"
          v-model="choose"
          placeholder="彩种"
        >
          <el-option
            @click.native="statustype(item.code)"
            v-for="item in module"
            :key="item.value"
            :label="item.value"
            :value="item.code"
          ></el-option>
        </el-select>
        <!-- 确定 -->
        <el-button @click="determine" class="edge" size="mini" type="primary">确认</el-button>
        <el-button class="edge" size="mini">重置</el-button>
      </div>

      <!-- 列表 -->
      <div class="list">
        <el-table
         :header-cell-style="{background:'#ccc'}"
          border
          size="mini"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column prop="time" label="注单编号"></el-table-column>
          <el-table-column prop="name" label="账号"></el-table-column>
          <el-table-column prop="color" label="彩种"></el-table-column>
          <el-table-column prop="number" label="笔数"></el-table-column>
          <el-table-column prop="amount" label="下注总金额"></el-table-column>
          <el-table-column prop="backwater" label="回水"></el-table-column>
          <el-table-column prop="odds" label="赔率"></el-table-column>
          <el-table-column prop="Betontime" label="下注时间"></el-table-column>
          <el-table-column prop="operation" label="操作">
            <template>
              <el-button size="mini" type="primary">详情</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div style="margin-top: 20px;float:right">
          <el-pagination
            size="mini"
            class="pageNumage"
            @current-change="handleCurrentChange"
            background
            layout="prev, pager, next"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>

    <!-- 已封盘列表 -->
    <div v-if="typeIndex == 2 ? true : false">
      <div>
        <el-input
          class="edge"
          style="width:180px"
          size="mini"
          placeholder="注单编号,账号"
          prefix-icon="el-icon-search"
          v-model="keyword"
        ></el-input>
        <!-- 中奖状态 -->
        <el-select
          class="edge"
          style="width:180px"
          clearable
          size="mini"
          v-model="winstatus"
          placeholder="中奖状态"
        >
          <el-option
            @click.native="statusty(item.code)"
            v-for="item in winNumber"
            :key="item.value"
            :label="item.value"
            :value="item.code"
          ></el-option>
        </el-select>

        <!-- 彩种 -->
        <el-select
          class="edge"
          style="width:180px"
          clearable
          size="mini"
          v-model="choose"
          placeholder="彩种"
        >
          <el-option
            @click.native="statustype(item.code)"
            v-for="item in module"
            :key="item.value"
            :label="item.value"
            :value="item.code"
          ></el-option>
        </el-select>

        <!-- 下注时间 -->

        <el-date-picker
          class="edge"
          style="width:180px"
          size="mini"
          @change="getSTime"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          v-model="dayTime"
          type="date"
          placeholder="下注时间"
        ></el-date-picker>
        <!-- 期数 -->
        <el-input style="width:180px" size="mini" v-model="issue" placeholder="期数"></el-input>

        <!-- 确定 -->
        <el-button @click="buylogin" class="edge" size="mini" type="primary">确认</el-button>
        <el-button class="edge" size="mini">重置</el-button>
      </div>

      <!-- 列表 -->
      <div class="list">
        <el-table
          border
          size="mini"
          :header-cell-style="{background:'#ccc'}"
          :data="tableyards"
          style="width: 100%"
        >
          <el-table-column prop="isWinName" label="中奖状态"></el-table-column>
          <el-table-column prop="memberId" label="订单编号"></el-table-column>
          <el-table-column prop="memberAccount" label="账号"></el-table-column>
          <el-table-column prop="moduleName" label="彩种"></el-table-column>
          <el-table-column prop="quantity" label="笔数"></el-table-column>
          <el-table-column prop="backAmount" label="下注总金额"></el-table-column>
          <el-table-column prop="winAmount" label="赔率"></el-table-column>
          <el-table-column prop="backAmount" label="中奖"></el-table-column>
          <el-table-column prop="profit" label="盈亏"></el-table-column>
          <el-table-column prop="issue" label="期数"></el-table-column>
          <el-table-column prop="num" label="开奖号码"></el-table-column>
          <el-table-column prop="day" label="下注时间"></el-table-column>
          <el-table-column prop="operation" label="操作">
            <template slot-scope="scope">
              <el-button @click="Modify(scope.row)" size="mini" type="primary">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px;float:right">
          <el-pagination
            size="mini"
            class="pageNumage"
            @current-change="handleCurrentChange1"
            background
            layout="prev, pager, next"
            :total="total"
          ></el-pagination>
        </div>

        <!-- 弹窗--------------------- -->
        <el-dialog title="查看详情" :visible.sync="show" width="60%" :before-close="handleClose">
          <el-table
            size="mini"
            border
            :header-cell-style="{background:'#ccc'}"
            :data="tableData2"
            style="width: 100%"
            
          >
            <el-table-column prop="issue" label="注单编号" min-width="80"></el-table-column>
            <el-table-column prop="num" label="号码" min-width="80"></el-table-column>
            <el-table-column prop="itemAmount" label="金额" min-width="80"></el-table-column>
            <el-table-column prop="backAmount" label="回水" min-width="80"></el-table-column>
            <el-table-column prop="odds" label="赔率" min-width="80"></el-table-column>
            <el-table-column prop="winAmount" label="中奖" min-width="80"></el-table-column>
            <el-table-column prop="profit" label="盈亏" min-width="80"></el-table-column>
            <el-table-column prop="createTime" label="下注时间" min-width="80"></el-table-column>
          </el-table>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import { getList } from "@/api/table";
import { Module, current, open, close, order } from "@/api/user";
import qs from "qs";
export default {
  data() {
    return {
      msg1: {},
      msg2: {},
      reward: "", //中奖状态
      typecode: 1, //取状态
      tabPosition: "top",
      typeIndex: "1",
      module: [],
      value: "",
      choose: "河内五",
      keyword: "",
      currentPage: 1,
      currentPage3: 5,
      winstatus: "", //中奖状态
      winNumber: [{ value: "未中奖", code: 0 }, { value: "中奖", code: 1 }],
      dayTime: "", //下注时间
      options: [],
      tableData: [], //进行时
      pageNum: 1,
      total: 0,
      //   已封盘
      tableyards: [],
      issue: "", //期数
      show: false,
      tableData2: []
    };
  },
  watch: {
    "msg1.time"() {
      if (this.msg1.time == "--") {
        setTimeout(() => {
          this.getCur(1);
        }, 10000);
      }
    },
    "msg2.time2"() {
      if (this.msg2.time2 == "--") {
        setTimeout(() => {
          this.getCur(2);
        }, 10000);
      }
    }
  },
  created() {
    this.statusColor();
    // this.winNumb();
    this.getCur(1), this.getCur(2);
    this.during(); //进行时
    this.Rotary(); //已封盘
  },
  methods: {
    // 状态点击
    statustype(num) {
      let that = this;
      that.typecode = num;
      console.log(that.typecode, 7777);
    },
    // 中奖状态
    statusty(num) {
      let that = this;
      that.reward = num;
      console.log(that.reward, 7777);
    },
    // 彩种
    statusColor() {
      let data = qs.stringify({});
      Module(data).then(res => {
        console.log(res.data, "彩种");
        if (res.data.code == 200) {
          this.module = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 中奖号码状态
    // winNumb() {
    //   let data = qs.stringify({});
    //   winNumber(data).then(res => {
    //     console.log(res.data, "彩种");
    //     if (res.data.code == 200) {
    //       this.winNumber = res.data.data;
    //     } else {
    //       this.$message.error(res.data.msg);
    //     }
    //   });
    // },

    // 期数
    getCur(type) {
      let data = qs.stringify({
        module: type
      });
      current(data).then(res => {
        console.log(res.data, "期数");
        if (type == 1) {
          this.msg1 = res.data.data;
        } else if (type == 2) {
          this.msg2 = res.data.data;
        }
        setInterval(() => {
          this.$set(
            this.msg1,
            "time",
            this.timePro(
              new Date().getTime(),
              new Date(this.msg1.openWinTime).getTime()
            )
          );
          this.$set(
            this.msg2,
            "time2",
            this.timePro(
              new Date().getTime(),
              new Date(this.msg2.openWinTime).getTime()
            )
          );
        }, 1000);
      });
    },
    // 进行时列表
    during() {
      let data = qs.stringify({
        pageNum: this.pageNum,
        pageSize: 10,
        module: this.typecode,
        keyword: this.keyword
      });
      open(data).then(res => {
        console.log(res.data, "进行时");
        if (res.data.code == 200) {
          this.tableData = res.data.data;
          this.total = res.data.count;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 进行时分页
    handleCurrentChange(val) {
      this.pageNum = val;
      this.during();
    },

    // 已封盘列表
    Rotary() {
      let data = qs.stringify({
        pageNum: this.pageNum,
        pageSize: 10,
        module: this.typecode
        //  keyword:this.keyword,
        //  isWin:this.reward,
        //  day:this.dayTime,
        //  issue:this.issue
      });
      close(data).then(res => {
        console.log(res.data, "已封盘");
        if (res.data.code == 200) {
          this.tableyards = res.data.data;
          this.total = res.data.count;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 已封盘详情
    Modify(val) {
      this.show = true;
      let data = qs.stringify({
        pageNum: 1,
        pageSize: 1000,
        module: this.typecode,
        issue: val.issue,
        memberId: val.memberId
      });
      order(data).then(res => {
        console.log(res.data, "列表详情");
        if (res.data.code == 200) {
          this.tableData2 = res.data.data;
        } else {
          that.$message.error(res.data.msg);
        }
      });
    },
    handleCurrentChange1(val) {
      this.pageNum = val;
      this.Rotary();
    },
    // 确定
    buylogin() {
      this.Rotary();
    },
    // 进行时确定
    determine() {
      this.during();
    },
    // 倒计时
    timePro(start, end) {
      var s1 = start,
        s2 = end;
      var total = (s2 - s1) / 1000;
      var day = parseInt(total / (24 * 60 * 60));
      var afterDay = total - day * 24 * 60 * 60;
      var hour = parseInt(afterDay / (60 * 60));
      var afterHour = total - day * 24 * 60 * 60 - hour * 60 * 60;
      var min = parseInt(afterHour / 60);
      var afterMin = total - day * 24 * 60 * 60 - hour * 60 * 60 - min * 60;
      if (min <= 0 && afterMin <= 0) {
        // this.getCur(1);
        // this.getCur(2);
        return "--";
      } else {
        return min + "分:" + afterMin.toFixed(0) + "秒";
      }
    },

    // 时间
    getSTime(t) {
      console.log(t, 777);
    },
      handleClose(done) {
            this.show = false
            // this.$confirm("确认关闭？")
            //     .then(_ => {
            //         done();
            //     })
            //     .catch(_ => {});
        },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    }
  }
};
</script>
<style lang="less" scoped>
.tabs {
  margin-top: 20px;
  margin-left: 20px;
}
.dist {
  display: flex;
  margin-left: 20px;
  div:nth-child(2) {
    margin-left: 20px;
  }
}
// 列表
.list {
  margin-left: 20px;
  margin-top: 20px;
}
.edge {
  margin: 0 0 20px 20px !important;
}
.home-line {
  padding: 0 20px;
}
.home-type {
  > div {
    text-align: center;
  }
}
.border-size {
  border: 1px solid #eaeefb;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 15px;
}
</style>